<template>
  <div>
    <hzhy-form-renderer
      ref="formRender"
      v-model="formData"
      label-position="top"
      isFull
      :content="content"
    >
    </hzhy-form-renderer>
  </div>
</template>

<script>
import CommonUploadFile from '@/components/common-upload-file'
import IconConfigDialog from '@/container/configure/component/icon-config-dialog'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {},
    }
  },
  computed: {
    content() {
      return [
        {
          $id: 'titleZh',
          $type: 'input',
          label: '标题(中文)',
          $el: {
            placeholder: '请输入标题(中文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
        },
        {
          $id: 'titleEn',
          $type: 'input',
          label: '标题(英文)',
          $el: {
            placeholder: '请输入标题(英文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
        },
        {
          $id: 'contentZh',
          $type: 'input',
          label: '内容(中文)',
          $el: {
            placeholder: '请输入内容(中文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
        },
        {
          $id: 'contentEn',
          $type: 'input',
          label: '内容(英文)',
          $el: {
            placeholder: '请输入内容(英文)',
            clearable: true,
            maxlength: 300,
            showWordLimit: true,
          },
        },
        {
          component: CommonUploadFile,
          $id: 'coverImage',
          label: '图片',
          $el: {
            max: 1,
            accept: '.jpg,.jpeg,.png',
            tips: '图片最佳尺寸：650 X 370',
          },
          inputFormat: ({ coverImage }) => {
            if (!coverImage) {
              return []
            }
            const result = []
            coverImage.split(',').forEach((item) => {
              result.push({
                name: item,
                response: item,
              })
            })
            return result
          },
          outputFormat: (val) => {
            if (!val || !val.length) {
              return
            }
            return val.map(({ response }) => response).join(',')
          },
        },
        {
          id: 'imgAlign',
          type: 'radio-group',
          label: '图片对齐方式',
          options: [
            {
              label: '左对齐',
              value: 'left',
            },
            {
              label: '右对齐',
              value: 'right',
            },
          ],
        },
        {
          $id: 'icon',
          label: '图标',
          component: IconConfigDialog,
        },
      ]
    },
  },
  watch: {
    componentData: {
      handler(value) {
        // 初始化默认值
        this.formData = { ...value }
      },
      immediate: true,
    },
    formData: {
      handler(value) {
        this.$emit('change', value)
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.banner-item {
}
</style>
